<html>
<head>
  <title>admin</title>
<link href="https://res.wx.qq.com/mpres/htmledition/images/favicon1ddd38.ico" rel="Shortcut Icon">
<link rel="stylesheet" href="http://cdn.wedocare.com/vendor/prism/0.0.1/prism.css">
<link rel="stylesheet" href="http://cdn.wedocare.com/vendor/bootstrap/3.1.1/css/bootstrap.min.css">
  <style>
    html,body{
      width:100%;
      height:100%;
      overflow:hidden;
      padding:0;
      margin:0;
      background: #000;
      position: relative;
    }
      
    #editor { 
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    input[type="submit"]{
      width:366px;
      height:50px;
      position:absolute;
      top:620px;
      right:108px;
      z-index: 1;
      background:#fff;
      border:none; 
      font-size: 20px;
    }
    #div_success,
    #div_error{
	    width:300px;
	    position:fixed;
	    top:0;
	    left:50px;
	    margin-left:-150px;
	    color:#fff;
    }
    #div_success{ background:#f9f2f4; color:#c7254e;}
    #div_error{ backgroud:#dff0d8;color:#468847;}
    .admin_app_secret{
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
    }
      
    .phone{
      position: absolute;
      top: -200px;
      right: 100px;
      z-index: 1;
      width:385px;
      height:800px;
      background:url(http://cdn.wedocare.com/img/message/message_iphone.png) no-repeat;
    }
      
      
.phone>ul{
  margin: 250px 0 100px 68px;
  padding: 0;
}
    
.phone>ul li{
  width: 100px;
  height:25px;
  margin-bottom: 10px;
  background: #fff;
  list-style: none;
} 
    
.phone>ul li:nth-child(1){
  width: 110px;
}
.phone>ul li:nth-child(2){
  width: 160px;
}
.phone>ul li:nth-child(3){
  width: 60px;
}
.phone>ul li:nth-child(4){
  width: 200px;
}

      
      


/* 按钮组 */
#div_result{
  position: absolute;
  bottom: 125px;
  left: 0;
  width: 2000px;
}

#div_result a{
  width: 103px;
  height: 40px;
  line-height: 28px;
  border-radius: 0;
  font-size: 16px;
  color: #fff;
  padding: 6px 12px;
}
#div_result a:hover{
  background: #d2322d;
}
#div_result a:before,
#div_result a:after{
  display: none;
}

#div_result > div:nth-child(1) > a{
  width: 104px;
}

#div_result > div:nth-child(1) > a,
#div_result > div:nth-child(2) > a{
  border-right: none;
}

      
      

/* 1、2、3、*/
#div_result > div[length="1"] > a{
  width: 310px;
}
#div_result > div[length="2"] > a{
  width: 155px;
}
      


/* 出现二级菜单：一级菜单的箭头标识 */
#div_result a.option_icon:before{
  content: '';
  display: inline-block;
  width: 14px;
  height: 12px;
  background: url(http://cdn.wedocare.com/img/edit_button/edit_button_icon.png) no-repeat 0 0;
  background-size: 12px;
}


.btn_group_demo{
  width: 310px;
  overflow: hidden;
  position: absolute;
  height: 100%;
  top:0;
  left:39px;
}





/* 出现二级菜单：向下小三角 */
#div_result .dropdown-menu{
  bottom: 50px;
}
#div_result .dropdown-menu:empty{
  display: none;
}
#div_result .dropdown-menu:before{
  content: ''; 
  position: absolute;
  bottom: -2px;
  left: 40px;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 7px solid;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  color: #ac2925;
}


#div_result > div > ul a{
  width: 93px;
  height: 40px;
  border-radius: 0;
  font-size: 16px;
}
#div_result > div > ul {
  border: none;
  background: none;
  box-shadow: none;
  margin-left: 5px;
}
#div_result > div > ul li:nth-child(1) + li a{
  border-top: none;
}
      
#textarea_markdown{
  display:none;
  position:absolute;
}    
#div_json{
  position: absolute;
  top: 0px;
  right: 500px;
  width: 300px;
  z-index: 1;
  height: 100%;
}
#div_json pre{
  max-height: 90%;
  overflow-y: auto;
}
#div_json pre:empty{
  display:none;
}
      
/* Retina device*/
@media (min--moz-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2),
(-ms-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5){
  .phone{
    background:url(http://cdn.wedocare.com/img/message/message_iphone@2x.png) no-repeat;
    background-size: auto 800px;
  }
    
  #div_result a.option_icon:before{
    background: url(http://cdn.wedocare.com/img/edit_button/edit_button_icon@2x.png) no-repeat 0 0;
    background-size: 12px;
  }
}
  </style>
</head>
<body>

<form method="post" action="">

<div id="editor"></div>    
    
<div class="phone">
  <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>
  <div class="btn_group_demo">
      <div id="div_result"></div>
  </div>
</div>

<textarea id='textarea_markdown' name="buttons" placeholder="自定义按钮，请输入">MARKDOWN</textarea>
<input type="password" class="admin_app_secret" name="app_secret" value="APPSECRET" />
<input type="submit" name='action' value='更新菜单'></input>
</form>
    

<div id="div_success"></div>
<div id="div_error"></div>

<div id='div_json'><pre class="language-javascript"></pre></div>

<script id='template_div_result' type='template/mustache'>
{{#.}}<div class='btn-group dropup' length='{{length}}'><a class='btn btn-danger dropdown-toggle {{#sub_button}} option_icon{{/sub_button}}' {{#url}}href='{{.}}' target='blank'{{/url}} {{^url}}data-toggle='dropdown'{{/url}}>{{name}}</a><ul class='dropdown-menu' role='menu'>{{#sub_button}}<li><a class='btn btn-danger' {{#url}}href='{{.}}' target='blank'{{/url}}>{{name}}</a></li>{{/sub_button }}</ul></div>{{/.}}
</script>
<script src="ace/ace.js" type="text/javascript" ></script>
<script src="ace/mode-markdown.js" type="text/javascript" ></script>
<script src="ace/theme-terminal.js" type="text/javascript"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js'></script>
<script src="http://cdn.wedocare.com/vendor/Library/library.min.js"></script>
<script src="http://cdn.wedocare.com/vendor/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
  var markdown_2_json     = function markdown_2_json() {};
  var editor              = ace.edit("editor");
  var textarea_markdown   = document.querySelector('#textarea_markdown');
  var div_json            = document.querySelector('#div_json pre');
  var template_div_result = document.querySelector('#template_div_result').innerHTML;
  var div_result          = document.querySelector('#div_result');
  var update              = function () {
    var buttons           = markdown_2_json(textarea_markdown.value);
    div_json.innerHTML    = JSON.stringify(buttons, null, '  ');
    div_result.innerHTML  = Mustache.render(template_div_result, buttons);
  };
  update();
  editor.setTheme("ace/theme/terminal");
  editor.getSession().setMode("ace/mode/markdown");
  editor.getSession().setValue(textarea_markdown.value);
  editor.getSession().on('change', function() {
    textarea_markdown.value = editor.getSession().getValue();
    update();
  });
</script>
</body>
</html>
